<template>
  <a-modal
    v-model:visible="modelVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    fullscreen
    body-class="modal-body"
    unmount-on-close
  >
    <template #title>
      <div class="" style="width: 100%; display: flex">创建试用期考核</div>
    </template>
    <div class="template-steps">
      <a-steps changeable :current="current" @change="setCurrent" line-less>
        <a-step
          ><template #icon="{ step }"> {{ step }} </template> 方案基本信息
        </a-step>
        <a-step>
          <template #icon="{ step }"> {{ step }} </template>
          试用期转正设置</a-step
        >
        <a-step
          ><template #icon="{ step }"> {{ step }} </template
          >选择方案设置</a-step
        >
        <a-step
          ><template #icon="{ step }"> {{ step }} </template
          >选择考核工具</a-step
        >
        <a-step
          ><template #icon="{ step }"> {{ step }} </template
          >考核内容设置</a-step
        >
        <a-step
          ><template #icon="{ step }"> {{ step }} </template
          >考核方案确认</a-step
        >
      </a-steps>
    </div>
    <!-- 方案基础信息 -->
    <div ref="modal" v-show="current === 1">
      <BaseInfo
        ref="baseInfoRef"
        v-show="current === 1"
        v-model:templateData="templateData"
        :user-info="props.userInfo"
      />
    </div>

    <!-- 试用期转正设置 -->
    <div ref="modal" v-show="current === 2">
      <FormSetting
        ref="formSettingRef"
        v-model:data="templateData.personnelAssessmentOption"
        v-model:examineData="templateData"
        :userInfo="props.userInfo"
        v-model:level-data="levelData"
        v-model:examinationRules="examinationRules"
      />
    </div>
    <!-- 选择方案设置 -->
    <div v-show="current === 3">
      <FormReview
        ref="formReviewRef"
        v-model:data="templateData.personnelAssessmentOption"
        v-model:currentProgrammeIndex="currentProgrammeIndex"
        @selectChange="selectChange"
      />
    </div>
    <!-- 选择考核工具 -->
    <div v-show="current === 4">
      <AssessmentTools
        ref="assessmentToolsRef"
        v-model:data="
          templateData.personnelAssessmentOption[currentProgrammeIndex]
            .personnelAssessmentOptionDimensionality
        "
        v-model:baseInfo="
          templateData.personnelAssessmentOption[currentProgrammeIndex]
        "
      />
    </div>
    <!-- 考核内容设置 -->
    <div v-show="current === 5">
      <AssessmentIndex
        ref="assessmentIndexRef"
        v-model:data="
          templateData.personnelAssessmentOption[currentProgrammeIndex]
        "
      />
    </div>
    <!-- 方案确认 -->
    <div v-show="current === 6">
      <SchemeConfirmation
        ref="schemeConfirmationRef"
        v-model:templateData="
          templateData.personnelAssessmentOption[currentProgrammeIndex]
        "
        :user-info="templateData"
      />
    </div>

    <template #footer>
      <div class="modal-footer">
        <a-space size="large" align="center">
          <a-button type="secondary" :disabled="current <= 1" @click="onPrev">
            <IconLeft />
            上一步
          </a-button>
          <a-button
            type="primary"
            v-show="![3, 6].includes(current)"
            :disabled="current === 6"
            @click="onNext"
          >
            下一步
            <IconRight />
          </a-button>
          <a-button type="primary" @click="submit(1)"> 保存 </a-button>
          <a-button v-if="current === 6" type="primary" @click="submit(2)">
            提交
          </a-button>
        </a-space>
      </div>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { cloneDeep } from 'lodash';
import BaseInfo from './conponents/BaseInfo.vue';
import FormSetting from './conponents/FormSetting.vue';
import FormReview from './conponents/FormReview.vue';
import SchemeConfirmation from './conponents/SchemeConfirmation.vue';
import AssessmentTools from './conponents/AssessmentTools.vue';
import AssessmentIndex from './conponents/AssessmentIndex.vue';
import { useVModel } from '@vueuse/core';
import type {
  ProbationExamine,
  PersonnelAssessmentOptionLevel,
  PersonnelUserExaminationRules
} from '@/apis/human/base/variationManager/probation/type';
import { PerformanceAppraisal } from '@/apis/management/performance/baseSetting/template/type';

const props = withDefaults(
  defineProps<{
    visible?: boolean;
    data: ProbationExamine[];
    userInfo: any;
    levelData: PersonnelAssessmentOptionLevel[];
    examinationRules: PersonnelUserExaminationRules;
  }>(),
  {
    visible: false
  }
);
const emit = defineEmits(['update:visible', 'update:data', 'handleOk', 'save']);
const modelVisible = useVModel(props, 'visible', emit);
const templateData = useVModel(props, 'data', emit);
const levelData = useVModel(props, 'levelData', emit);
const examinationRules = useVModel(props, 'examinationRules', emit);
const handleCancel = () => {
  modelVisible.value = false;
};

const handleOk = () => {
  emit('handleOk');
  handleCancel();
};
const current = ref(1);
const reset = () => {
  current.value = 1;
};
watch(
  () => props.visible,
  (val) => {
    reset();
  },
  { deep: true }
);
const onPrev = () => {
  current.value = Math.max(1, current.value - 1);
};
const baseInfoRef = ref();
const formSettingRef = ref();
const formReviewRef = ref();
const assessmentToolsRef = ref();
const assessmentIndexRef = ref();
const schemeConfirmationRef = ref();
const validate = async () => {
  let check = void 0;
  switch (current.value) {
    case 1:
      check = await baseInfoRef.value.validate();
      return check;
    case 2:
      check = await formSettingRef.value.validate();
      return check;
    // case 3:
    //   check = await formReviewRef.value.validate();
    //   if (check) break;
    case 4:
      check = await assessmentToolsRef.value.validate();
      return check;
    // case 5:
    //   check = await assessmentIndexRef.value.validate();
    //   if (check) break;
    // case 6:
    //   check = await schemeConfirmationRef.value.validate();
    //   if (check) break;
  }
  return check;
};
const onNext = async () => {
  const check = await validate();
  console.log('check', check);

  if (check) return;
  current.value = Math.min(6, current.value + 1);
};
const setCurrent = async (n: number) => {
  const check = await baseInfoRef.value.validate();
  if (check) return;
  current.value = n;
};
const submit = async (n: number) => {
  // const check = await baseInfoRef.value.validate();
  // if (check) return;
  // if (n === 1) {
  //   templateData.value.forEach((item) => {
  //     item.optionStatus = 3;
  //   });
  // }
  emit('save');
};
const currentProgrammeIndex = ref(0);
const selectChange = () => {
  current.value = current.value + 1;
};
</script>

<style lang="less" scoped>
.template-steps {
  padding: 0 160px;
  margin-bottom: 60px;
}
.modal-footer {
  display: flex;
  justify-content: center;
}
</style>
